<nz-card class="m-b-2">
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">售后单号</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入售后单号"
                        [(ngModel)]="queryForm.returnNum"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">订单编号</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入订单编号"
                        [(ngModel)]="queryForm.orderNum"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">客户手机</label>
                <div class="common-search-conrol">
                    <input
                        type="text"
                        nz-input
                        placeholder="请输入客户手机"
                        [(ngModel)]="queryForm.customerName"
                    />
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">售后状态</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzPlaceHolder="请选择" [(ngModel)]="queryForm.status">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="用户提交申请（待审核）" nzValue="0"></nz-option>
                        <nz-option nzLabel="审核通过（待买家退货）" nzValue="1"></nz-option>
                        <nz-option nzLabel="退货超时" nzValue="2"></nz-option>
                        <nz-option nzLabel="商品已寄出" nzValue="3"></nz-option>
                        <nz-option nzLabel="待平台审核" nzValue="4"></nz-option>
                        <nz-option nzLabel="售后成功" nzValue="6"></nz-option>
                        <nz-option nzLabel="售后失败" nzValue="7"></nz-option>
                        <nz-option nzLabel="已取消" nzValue="8"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">售后方式</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzPlaceHolder="请选择" [(ngModel)]="queryForm.type">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="退货退款" nzValue="1"></nz-option>
                        <nz-option nzLabel="换货" nzValue="2"></nz-option>
                        <nz-option nzLabel="退款" nzValue="4"></nz-option>
                        <nz-option nzLabel="补货" nzValue="5"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">货主</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择货主"
                        [(ngModel)]="supplierIdList">
                        <nz-option
                            *ngFor="let val of supplierOptions"
                            [nzLabel]="val.name"
                            [nzValue]="val.id">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">申请时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzAllowClear]="false" [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.createFormat"></nz-range-picker>
                </div>
            </div>
            
            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">超时时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzAllowClear]="false" [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.timeoutFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">退款时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker nzInputReadOnly [nzAllowClear]="true" [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.refundFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <button nz-button nzType="primary" class="m-r-8" [nzLoading]="tableLoading" (click)="query()">查询</button>
                <button nz-button nzType="default" (click)="resetData()">重置</button>
                <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                    {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                </button>
            </div>
        </div>
    </div>
</nz-card>

<nz-card>
    <div class="pagination-wrap-position table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="listOfData?.size"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
            >
            <thead>
                <tr>
                    <!-- <th nzAlign="center" nzWidth="100px" nzLeft>ID</th> -->
                    <th nzAlign="center" nzWidth="220px">售后单号</th>
                    <th nzAlign="center" nzWidth="180px">售后状态</th>
                    <th nzAlign="center" nzWidth="150px">售后方式</th>
                    <th nzAlign="center" nzWidth="120px">退款金额</th>
                    <th nzAlign="center" nzWidth="120px">退款爱豆</th>
                    <th nzAlign="center" nzWidth="120px">订单金额</th>
                    <th nzAlign="center" nzWidth="200px">订单编号</th>
                    <th nzAlign="center" nzWidth="140px">客户</th>
                    <th nzAlign="center" nzWidth="160px">申请时间</th>
                    <th nzAlign="center" nzWidth="160px">超时时间</th>
                    <th nzAlign="center" nzWidth="160px">退款时间</th>
                    <th nzAlign="center" nzWidth="160px">货主</th>
                    <th nzAlign="center" nzWidth="200px" nzRight>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <!-- ID -->
                    <!-- <td nzAlign="center" nzLeft>{{data.refundId}}</td> -->
                    <!-- 售后单号 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="data.returnNum; else dhTemplate">
                            <a
                                *ngIf="permission.userPermission.has('service:sale:afterSale')"
                                style="color: #409EFF;"
                                [routerLink]="['../saleDetails', data.refundId]">
                                {{ data.returnNum }}
                            </a>
                        </ng-container>
                        <ng-template #dhTemplate>
                            -
                        </ng-template>
                    </td>
                    <!-- 售后状态 -->
                    <td nzAlign="center">{{data.status | saleStatus }}</td>
                    <!-- 售后方式 -->
                    <td nzAlign="center">{{data.type | saleTypeStatus }}</td>
                    <!-- 退款金额 -->
                    <td nzAlign="center">{{data.refundPrice ? '￥' + data.refundPrice : '-'}}</td>
                    <!-- 退款爱豆 -->
                    <td nzAlign="center">{{ data.refundAiDouAmount || '0' }}</td>
                    <!-- 订单金额 -->
                    <td nzAlign="center">{{data.realPrice ?'￥' + data.realPrice : '-'}}</td>
                    <!-- 订单编号 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="data.orderNum; else odpTemplate">
                            <a
                                style="color: #409EFF;"
                                target="_blank"
                                [routerLink]="['/order/accDetails', data.orderId]">
                                {{ data.orderNum }}
                            </a>
                        </ng-container>
                        <ng-template #odpTemplate>
                            -
                        </ng-template>
                    </td>
                    <!-- 客户名字/手机 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="data.customerName">
                            <a
                                style="color: #409EFF;"
                                target="_blank"
                                [routerLink]="['/customer/tabs', data.userId, 0]">
                                {{ data.customerName ? data.customerName : '-' }}
                            </a>
                        </ng-container>
                        <br>
                        {{data.customerPhone}}
                    </td>
                    <!-- 申请时间 -->
                    <td nzAlign="center">{{data.createTime ? data.createTime : '-'}}</td>
                    <!-- 超时时间 -->
                    <td nzAlign="center">{{data.timeoutTime ? data.timeoutTime : '-'}}</td>
                    <!-- 退款时间 -->
                    <td nzAlign="center">{{data.refundTime ? data.refundTime : '-'}}</td>
                    <!-- 货主 -->
                    <td nzAlign="center">
                        <ng-container *ngIf="data.supplierName; else hzTemplate">
                            <a
                                style="color: #409EFF;"
                                target="_blank"
                                [routerLink]="['/stock/sqeAdd', data.supplierId]">
                                {{ data.supplierName || '-' }}
                            </a>
                        </ng-container>
                        <ng-template #hzTemplate>
                            -
                        </ng-template>
                    </td>
                    <!-- 操作 -->
                    <td nzAlign="center" nzRight>
                        <a
                            *ngIf="permission.userPermission.has('service:sale:track')"
                            nz-button
                            nzType="link"
                            (click)="followModal(data.returnNum)"
                        >跟进</a>
                        <a
                            *ngIf="permission.userPermission.has('service:sale:afterSale')"
                            nz-button
                            nzType="link"
                            [routerLink]="['../saleDetails',data.refundId]"
                        >查看详情</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>

<nz-modal [(nzVisible)]="followVisible" nzTitle="跟进" (nzOnCancel)="handleCancel()" [nzFooter]="null"
    [nzWidth]="'1050px'">
    <ng-container *nzModalContent>
        <div class="importBox">
            <textarea rows="6" nz-input [(ngModel)]="followParam.content" placeholder="请输入内容，限制100字"
                [maxlength]="100"></textarea>
            <div class="bt-box">
                <label for="file" class="followFile">
                    <span>选择文件</span>
                    <input id="file" type="file" multiple="multiple" [(ngModel)]="inputVal"
                        (change)="handleFileInput($event,2)">
                </label>
                <font>请选择图片、office文件、PDF文件</font>
                <button nz-button nzType="primary" (click)="followerSave()">提交</button>
            </div>
            <ul>
                <li *ngFor="let item of followParam.enclosure; index as i">
                    <span>{{item.showUrl}}</span>
                    <a nz-button nz-button-tdlink nzType="link" (click)="deleteFollowImg(i)">删除</a>
                </li>
            </ul>
        </div>
        <app-follow-component *ngIf="followParam.relationInformation" [id]="followParam.relationInformation" type="2">
        </app-follow-component>
    </ng-container>
</nz-modal>
